﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <link href="theme.css" rel="stylesheet" />
    <style type="text/css">
        img { width:100%;opacity:0;
              transition: opacity 2s;
               -webkit-transition: opacity 2s;
               -moz-transition: opacity 2s;
               -ms-transition: opacity 2s;
        }
    </style>

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>


    <!--  pace.js  -->
    <!--<script type="text/javascript">
        window.paceOptions = {
            
        }
    </script>
    <script src="pace.min.js"></script>
    <script type="text/javascript">
        Pace.on('hide', function () {
            $('img').css({ 'opacity': 1 });
        });
    </script>-->
    <!--  pace.js  -->


    <style type="text/css">
        .progress-bar-wrap {width:100%; height:100%;position:absolute;top:0;left:0;background:#ccc;z-index:9999; }
        .progress-bar {
            position: absolute;
            z-index: 999999;
            top: 50%;
            left: 0;
            width: 0%;
            height: 2px;
            background: #01439c;
            border-radius: 10%;
            -moz-transition: width 500ms ease-out,opacity 400ms linear;
            -ms-transition: width 500ms ease-out,opacity 400ms linear;
            -o-transition: width 500ms ease-out,opacity 400ms linear;
            -webkit-transition: width 500ms ease-out,opacity 400ms linear;
            transition: width 500ms ease-out,opacity 400ms linear;
        }
        .progress-bar:before { position: absolute; content: ''; top: 0; opacity: 1; width: 10%; right: 0px; height: 2px; box-shadow: #ccc 1px 0 6px 2px; border-radius: 50%; }


        body {  }

        .wrapper { position:relative;margin:10px;
            -webkit-perspective: 2000;
            -moz-perspective: 2000;
            perspective: 2000;
            -webkit-perspective-origin: 0 50%;
            -moz-perspective-origin: 0 50%;
            perspective-origin: 0 50%;
            -webkit-transform-style: preserve-3d;
	        -moz-transform-style: preserve-3d;
	        transform-style: preserve-3d;
        }
        .door{ width:100%; height:100%;position:absolute;top:0;left:0; background:#ccc;z-index:9990;
            -webkit-backface-visibility: hidden;
	        -moz-backface-visibility: hidden;
	        backface-visibility: hidden;
	        -webkit-transform-origin: 100% 0;
	        -moz-transform-origin: 100% 0;
	        transform-origin: 100% 0;
	        -webkit-transform: rotateY(0deg);
	        -moz-transform: rotateY(0deg);
	        transform: rotateY(0deg);
	        -webkit-transition: -webkit-transform 5s, opacity 0.1s 5s;
	        -moz-transition: -moz-transform 0.4s, opacity 0.1s 0.3s;
	        transition: transform 0.4s, opacity 0.1s 0.3s;
        }
        .door-open{ 
            opacity: 0;
	        -webkit-transform: rotateY(90deg);
	        -moz-transform: rotateY(90deg);
	        transform: rotateY(90deg);
        }

    </style>
    <script type="text/javascript">
        $(function () {
            var loaded = 0;
            var number_of_media = $(".img-wrap img").length;

            doProgress();

            // function for the progress bar
            function doProgress() {
                $("img").load(function () {
                    loaded++;
                    var newWidthPercentage = (loaded / number_of_media) * 100;
                    animateLoader(newWidthPercentage + '%');
                });
            }

            //Animate the loader
            function animateLoader(newWidth) {
                $(".progress-bar").width(newWidth);
                if (loaded == number_of_media) {
                    setTimeout(function () {
                        $('img').css({ opacity: 1 });

                        setTimeout(function () {
                            //$('.door').addClass('door-open');
                            $('.progress-bar-wrap').animate({ left: '100%' }, function () {
                                $(".progress-bar").animate({ opacity: 0 });
                            });
                        },2000);
                    }, 500);
                }
            }
        });
    </script>
</head>
<body>
    <div class="progress-bar-wrap">
        <div class="progress-bar"></div>
    </div>
    <!--<div class="wrapper">
        <div class="door"></div>-->
        <div class="img-wrap">
            <img src="images/6597269877772534866.jpg" />
            <img src="images/IMG_3979.jpg" />
            <img src="images/IMG_7153_2.JPG" />
            <img src="images/roadwornseries_04v1_1600x1200.jpg" />
            <img src="images/天津之眼.JPG" />
        </div>
    <!--</div>-->
</body>
</html>
